<template>
	<view class="warehousingToBeCon">
		<!-- nav -->
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						正规商品
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						寄售商品
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==3}" @click="chenked(3)">
						以物易物
					</view>
				</view>
			</view>
		</view>
		<!-- 收藏列表 -->
		<uni-swipe-action v-show="isActive!=3">
			<uni-swipe-action-item :right-options="options1" @click="bindClick" v-for="(item,index) in CollectionList">
				<view class="content-box">
					<view class="list_shop">
						<image :src="item.waresImgs" mode=""></image>
						<view class="titles">{{item.waresContent}}</view>
						<view class="types">{{item.parentCategoryName}}{{item.categoryName}}</view>
						<view class="moneys">¥{{item.waresPrice}}</view>
					</view>
				</view>
			</uni-swipe-action-item>
			<uni-swipe-action-item :right-options="options1" @click="bindClick">
				<view class="content-box">
					<view class="list_shop">
						<image src="" mode=""></image>
						<view class="titles">这里是商品标题这里是商品标题这里是商品标题</view>
						<view class="types">商品分类</view>
						<view class="moneys">¥2839.92</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="wuwu" v-show="isActive==3">
			<view class="wu-content">
				<view class="wu-content1">
					<view class="wu-content-btn">闲置物品</view>
					<view class="wu-content-left">
						<image src="../../../static/home/ss-imgs1.png" mode=""></image>
					</view>
					<view class="wu-content-btn2">易物物品</view>
					<view class="exchange">
						<image src="../../../static/me/exchange.png" mode=""></image>
					</view>
					<view class="wu-content-right">
						<image src="../../../static/home/ss-imgs2.png" mode=""></image>
					</view>
				</view>
				<view class="wu-content1-name">
					<view class="wu-content1-name1">
						Microsoft Xbox one s 专业游戏玩家机 1TB
					</view>
					<view class="wu-content1-name1">
						iPhone13 石墨灰 1TB 全网通乔布斯限定签名至尊版
					</view>
				</view>
				<view class="wu-content2">
					<view class="wu-content2-name">
						<view class="wu-content2-name-img">
							<image src="../../../static/home/ss-imgs5.png" mode=""></image>
						</view>
						<view class="wu-content2-name-title">
							用户名
						</view>
					</view>
					<view class="wu-content2-name2">
						<view class="wu-content2-name2-img">
							<image src="../../../static/home/ss-imgs3.png" mode=""></image>
						</view>
						<view class="wu-content2-name2-title">
							<image src="../../../static/home/ss-imgs4.png" mode=""></image>
						</view>
						<view class="iconfont mores">&#xe657;</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isActive: 2,
				pageNum:'10',//	页数
				pageSize:'10',//每页显示条数
				isActive: 1,
				titles: 1,
				CollectionList:[],
				options1: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#EB3E3E'
					}
				}],
			};
		},
		onLoad() {
			this.idleWaresCollectList()
			this.shouCang()
			this.spShouc()
		},
		methods: {
			// 查询当前登录用户的收藏列表
			spShouc() {
				var that = this
				that.$http.req.ajax({
					path: ':8069/web/mall/userCollectionList',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						pageNum:'1',
						pageSize:'1'
					},
					afterAjax: (res) => {
						if (res.code !== 200) {
							console.log(res.data, '查询收藏列表错误')
						}
						if (res.code == 200) {
							console.log('查询收藏列表通了')
						}
					}
				})
			},
			//收藏详情
			shouCang() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCollectList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     pageNum:that.pageNum,//页数
					 pageSize:that.pageSize//每页显示条数
				     },
				     afterAjax: (res) => {
						 		console.log(res,'收藏详情接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'收藏详情接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log('收藏详情通了')
									uni.showToast({
										title: '收藏详情接口',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			chenked(type) {
				this.isActive = type
				this.titles = type
			},
			bindClick(e) {
				uni.showToast({
					title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
					icon: 'none'
				});
			},
			idleWaresCollectList(){
				this.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresCollectList',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						pageNum:1,
						pageSize:10
					},
					afterAjax: (res) => {
						console.log(res, '详情')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warehousingToBeCon {
		width: 100%;

		.nav {
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			background-color: #fff;

			.flex_between {
				display: flex;

				.nav_title {
					height: 88rpx;
					line-height: 88rpx;
					width: 100%;
					text-align: center;
					font-size: 25rpx;
					font-family: PingFang SC;
					color: #888;
				}
			}
		}
	}

	.active {
		position: relative;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 50rpx;
		height: 7rpx;
		left: 0px;
		right: 0px;
		bottom: 3rpx;
		margin: auto;
		background-color: #FCDA22;
	}

	.list_shop {
		width: 750rpx;
		height: 268rpx;
	}

	.list_shop image {
		width: 231rpx;
		height: 231rpx;
		margin-left: 25rpx;
		border-radius: 14rpx;
		background: #EAEAEA;
		margin-top: 16rpx;
		margin-bottom: 18rpx;
		float: left;
	}

	.titles {
		width: 438rpx;
		height: 72rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		margin-left: 286rpx;
		padding-top: 21rpx;
		padding-bottom: 14rpx;
	}

	.types {
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
		margin-left: 286rpx;
	}

	.moneys {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		margin-left: 286rpx;
		position: absolute;
		bottom: 10px;
	}

	.slot-button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
	}

	.wuwu {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background: #F5F5F5;
	}

	.wu-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-radius: 14rpx;
		margin: 25rpx;
		background-color: #FFFFFF;
	}

	.wu-content1 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 25rpx 25rpx 0 25rpx;
		position: relative;
	}

	.wu-content-btn,
	.wu-content-btn2 {
		width: 124rpx;
		height: 47rpx;
		text-align: center;
		background-color: #fcda22;
		border-radius: 14rpx 0 10rpx 0;
		font-size: 18rpx;
		line-height: 47rpx;
		position: absolute;
		left: 1%;
		z-index: 999;
	}

	.exchange {
		width: 144rpx;
		height: 117rpx;
		position: absolute;
		left: 175rpx;
		top: -14rpx;
		z-index: 999;
	}

	.wu-content-btn {
		position: absolute;
		left: 1%;
		z-index: 999;
	}

	.wu-content-btn2 {
		position: absolute;
		left: 51%;
		z-index: 999;
		    border-right: 2px solid #ffffff;
		    border-bottom: 2px solid #ffffff;
	}

	.wu-content-left,
	.wu-content-right {
		width: 311rpx;
		height: 311rpx;
		border-radius: 14rpx;
	}

	image {
		max-width: 100%;
		max-height: 100%;
	}

	.wu-content1-name {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 25rpx;
		font-size: 25rpx;
		font-weight: 600;
	}

	.wu-content1-name1 {
		margin: 0 25rpx 25rpx 25rpx;
	}

	.wu-content2 {
		margin: 0 25rpx;
		border-top: 1px solid #f5f5f5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		line-height: 86rpx;
	}

	.wu-content2-name {
		display: flex;
		flex-direction: row;
		justify-content: left;
	}

	.wu-content2-name-img {
		margin-right: 14rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.wu-content2-name-title {
		font-size: 21rpx;
	}

	.wu-content2-name2 {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}

	.wu-content2-name2-img {
		margin-right: 14rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.wu-content2-name2-title {
		width: 123rpx;
		height: 36rpx;
	}

	.mores {
		color: #21201D;
		float: right;
		opacity: 0.35;
	}

	.shop_two {
		width: 338rpx;
		height: 338rpx;
		background: red;
		position: absolute;
		z-index: 999;
		opacity: 0.1;
		border-radius: 8px 8px 0px 0px;
	}

	.shop_uimages {
		width: 144rpx;
		height: 117rpx;
		position: absolute;
		z-index: 999;
		margin-left: 97rpx;
		margin-top: 103rpx;
	}

	.dinapingimg {
		float: right;
		width: 36rpx;
		height: 36rpx;
	}
</style>
